<template>
  <div class="customer-modal-container" v-loading.fullscreen.lock="loadingPage" >
    <form @submit.prevent="submit" class="base-form" v-if="init" novalidate>
      <customer-edit-form :is-create="isCreate" :fields="fields" v-model="form" ref="form"/>
    </form>
  </div>
</template>

<script>
/* api */
import * as CustomerApi from '@src/api/CustomerApi.ts'
/* component */
import CustomerEditForm from '@src/modules/customer/components/CustomerEditForm.vue'
/* enum */
import TenantDataLimitSourceEnum from '@model/enum/TenantDataLimitSourceEnum'
import TenantDataLimitTypeEnum from '@model/enum/TenantDataLimitTypeEnum'
/* util */
import platform from '@src/platform'
import * as FormUtil from '@src/component/form/util'
import * as util from '@src/modules/customer/util/customer'
import { isFunction } from '@src/util/type'
/* mixin */
import VersionMixin from '@src/mixins/versionMixin/index.ts'
import ThemeMixin from '@src/mixins/themeMixin/index.ts'
import { useFormTimezone } from 'pub-bbx-utils'

const { disposeFormSubmitTime } = useFormTimezone()

export default {
  name: 'customer-edit-view',
  inject: ['initData'],
  mixins: [VersionMixin, ThemeMixin],
  data() {
    return {
      submitting: false,
      pending: false,
      loadingPage: false,
      form: {},
      init: false,
      fieldInfo: []
    };
  },
  computed: {
    action() {
      return this.initData.action;
    },
    fields() {
      let originFields = this.fieldInfo || [];
      let sortedFields = originFields.sort((a, b) => a.orderId - b.orderId)
        .map(f => {
          if (f.formType === 'address' && f.isSystem) {
            f.isNull = this.initData.isAddressAllowNull ? 1 : 0;
          }
          // 客户名称加长度限制
          if (f.fieldName == 'name') {
            f.maxlength = 50
          }
          // 临时固定下提示，后续业务修改~
          if (!f.isNullRelationFields && f.fieldName === 'lmPhone') {
            f.placeholder = this.$t('common.placeholder.inputPhone')
          }
          if (!f.isNullRelationFields && f.fieldName === 'lmEmail') {
            f.placeholder = this.$t('common.placeholder.inputEmail')
          }
          return f;
        })
        .filter(f => {
          return (
            (
              f.fieldName !== 'tags' 
              || (f.fieldName === 'tags' && this.initData.isDivideByTag)
            )
          )
        });
      return FormUtil.migration(sortedFields)
    },
    postUrl() {
      if (location.pathname.indexOf('task') >= 0) {
        return '/task/customer/create';
      }
      return '/event/customer/create';
    },
    isCreate() {
      return this.action == 'create'
    }
  },
  methods: {
    submit(callBack) {
      this.submitting = true;
      this.$refs.form.validate()
        .then(valid => {
          this.submitting = false;
          if (!valid) return Promise.reject('validate fail.');

          let params = disposeFormSubmitTime(this.fields, util.packToCustomer(this.fields, this.form, this.initData.tags));
          params = this.globalFormSubmissionDataProcessingHandler(this.fields, params)

          this.toggleLoading()
          this.createMethod(params, callBack);
        })
        .catch(err => {
          console.error(err)
          this.toggleLoading(false)
        });
    },
    createMethod(params, callBack) {
      this.checkNumExceedLimitAfterHandler(this.$http.post(this.postUrl, params))
        .then(result => {
          let isSucc = result.succ

          platform.notification({
            type: isSucc ? 'success' : 'error',
            title: isSucc ? this.$t('customer.edit.createdSuccess') : this.$t('customer.edit.createdFail'),
            message: !isSucc && result.message
          });
          
          if (!isSucc) return;

          const addressId = result.data.addressId;
          const customerId = result.data.customerId;
          const linkmanId = result.data.linkmanId;

          const customer = {
            id:customerId,
            name: params.name,
            lmId:linkmanId,
            lmName: params.lmName,
            lmPhone: params.lmPhone,
            addressId,
            country: params.customerAddress.adCountry || '',
            province:params.customerAddress.adProvince || '',
            city: params.customerAddress.adCity || '',
            dist: params.customerAddress.adDist || '',
            address: params.customerAddress.adAddress || '',
            latitude: result.data.latitude,
            longitude: result.data.longitude,
            customerManager: params.customerManager,
            customerManagerName: params.customerManagerName || ''
          }

          /**
           * 1、后端es有一秒左右的延时
           * 2、因为延时所以有时候新建的客户数据会获取不到
           * 3、客户数据获取不到就导致新建客户的时候页面填充显示的是客户id而不是客户名称
           */
          setTimeout(() => {
            isFunction(callBack) && callBack(customer)
          },1500)

        })
        .catch(err => {
          console.error('editForModal CustomerEditView createMethod error', err)
        })
        .finally(() => {
          this.toggleLoading(false)
        })
    },
    initFormData() {
      let form = util.packToForm(this.fields, {}, this.initData.customerAddress);
      this.form = FormUtil.initialize(this.fields, form);
      this.addressBackup = this.form.customerAddress;
    },
    toggleLoading(loading = true) {
      this.pending = loading
      this.loadingPage = loading
    }
  },
  async mounted() {
    // 暴露提交方法
    window.submit = this.submit;

    try {
      this.loadingPage = true
      // 获取客户表单字段列表
      let result = await CustomerApi.getCustomerFields({isFromSetting: true});
      if (result.succ) {
        this.fieldInfo = result.data;
      }

      // 检查版本数量限制
      this.checkNumExceedLimitBeforeHandler
      && this.checkNumExceedLimitBeforeHandler(
        TenantDataLimitSourceEnum.Customer,
        TenantDataLimitTypeEnum.Customer
      )

      // 初始化默认值
      this.initFormData()
      this.init = true

    } catch (error) {
      console.error('editForModal CustomerEditView mounted an error ', error)
    } finally {
      this.loadingPage = false
    }

  },
  components: {
    [CustomerEditForm.name]: CustomerEditForm
  }
}
</script>

<style lang="scss">
body {
  .base-modal-mask{
    padding: 10px;
    display: flex;
    align-items: center;  
    justify-content: center;
  }
  .base-modal {
    margin: 0;
  }
}

.customer-modal-container {
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: #fff;

  .form-builder{
    padding: 10px 15px;

    .input-and-btn{
      display: flex !important;
      flex-flow: row nowrap;

      .form-item, .form-text, .form-select, .biz-team-select {
        flex: 1;
      }

      .base-dist-picker{
        padding-right: 0;
      }

      button{
        margin-left: 10px;
      }
    }
  }
}
</style>